<j:tbuttons 
  [editState]="editState"
  (saveBtnClick)="save()"
  (giveupBtnClick)="giveup()"
  (newBtnClick)="new()"
  (deleteBtnClick)="delete()"
  (searchBtnClick)="search($event)"
></j:tbuttons>
<div nz-row class="main-layout">
  <div nz-col nzSpan="6" class="main-layout-left">
    <nz-card class="main-card">
      <nz-tabset nzType="card">
        <nz-tab [nzTitle]="'BasicArchives::UI:SimplyTree.CardTitle.Directory' | abpLocalization">
          <nz-tree-view 
            [nzTreeControl]="treeControl"
            [nzDataSource]="dataSource"
            [nzDirectoryTree]="true"
            [trackBy]="trackBy"
          >
            <nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
              <nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
              <nz-tree-node-option
                [nzSelected]="selectListSelection.isSelected(node)"
                (nzClick)="selectNode(node)"
                (contextmenu)="contextMenu($event, menuLeaf, node)"
              >
                {{ node.name }}
                <nz-dropdown-menu #menuLeaf="nzDropdownMenu">
                  <ul nz-menu>
                    <li nz-menu-item (click)="refAddModal(node.parentId)">{{ 'BasicArchives::UI:SimplyTree.ContextMenu.SameLevel' | abpLocalization }}</li>
                    <li nz-menu-item (click)="refAddModal(node.id)">{{ 'BasicArchives::UI:SimplyTree.ContextMenu.Children' | abpLocalization }}</li>
                  </ul>
                </nz-dropdown-menu>
              </nz-tree-node-option>
            </nz-tree-node>

            <nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
              <nz-tree-node-toggle>
                <i
                  nz-icon
                  nzType="caret-down"
                  nzTreeNodeToggleRotateIcon
                  (nzClick)="toggleExpand(node)"
                ></i>
              </nz-tree-node-toggle>              
              <nz-tree-node-option
                [nzSelected]="selectListSelection.isSelected(node)"
                (nzClick)="selectNode(node)"
                (dblclick)="toggleExpand(node)"
                (contextmenu)="contextMenu($event, menuNode, node)"
              >
                {{ node.name }}
                <nz-dropdown-menu #menuNode="nzDropdownMenu">
                  <ul nz-menu>
                    <li nz-menu-item (click)="refAddModal(node.parentId)">{{ 'BasicArchives::UI:SimplyTree.ContextMenu.SameLevel' | abpLocalization }}</li>
                    <li nz-menu-item (click)="refAddModal(node.id)">{{ 'BasicArchives::UI:SimplyTree.ContextMenu.Children' | abpLocalization }}</li>
                  </ul>
                </nz-dropdown-menu>
              </nz-tree-node-option>
            </nz-tree-node>
          </nz-tree-view>
        </nz-tab>
      </nz-tabset>
    </nz-card>
  </div>
  <div nz-col nzSpan="18" class="main-layout-right">
    <nz-card class="main-card">
      <form nz-form [formGroup]="validateForm">
        <nz-tabset nzType="card">
          <nz-tab [nzTitle]="'BasicArchives::UI:SimplyTree.CardTitle.Base' | abpLocalization">
            <div nz-row>
              <div nz-col [nzSpan]="12">
                <nz-form-item>
                  <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="displayName">
                    {{ 'BasicArchives::ModelTitle:Joy.Erp.BasicArchives.Suppliers.SupplierType.DisplayName' | abpLocalization }}
                  </nz-form-label>
                  <nz-form-control [nzSm]="16" [nzXs]="24" nzHasFeedback [nzErrorTip]="errorTpl">
                    <input
                      nz-input
                      id="displayName"
                      formControlName="displayName"
                      [placeholder]="'BasicArchives::ModelPlaceHolder:Joy.Erp.BasicArchives.Suppliers.SupplierType.DisplayName' | abpLocalization"
                    />
                  </nz-form-control>
                </nz-form-item>
              </div>
            </div>
          </nz-tab>
        </nz-tabset>
      </form>

      <ng-template #errorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          {{ 'BasicArchives::UI:Validation:Required' | abpLocalization }}
        </ng-container>
        <ng-container *ngIf="control.hasError('maxlength')">
          {{ 'BasicArchives::UI:Validation:MaxLength' | abpLocalization: control.getError('maxlength').requiredLength }}
        </ng-container>
      </ng-template>

    </nz-card>
  </div>
</div> 